<template>
  <div class="detail-box">
    <div class="head">共享明细查看</div>
    <div class="title-name">
      情况综述：共N期，已确认M期共享明细，正在确认第X期共享明细
    </div>
    <div v-for="item in detailData" :key="item.id" class="detail-li">
      <div
        class="detail-head"
        :class="item.okState * 1 === 1 ? 'ok-detail' : 'warning-detail'"
      >
        <div class="left-head">
          <span>{{ item.titleName }}</span>
          <div
            class="state-btn"
            :class="item.okState * 1 === 1 ? 'ok-btn' : 'warning-btn'"
          >
            {{ item.okState * 1 === 1 ? "已确定" : "未确定" }}
          </div>
        </div>
        <div class="btn-box">
          <div v-if="item.okState * 1 === 2" class="warning-btn-list">
            <div class="btn-li">保存</div>
            <div class="btn-li">编辑</div>
          </div>
          <div class="btn-li">导入</div>
          <div class="btn-li">导出</div>
          <div class="btn-li">差异对比</div>
          <div class="btn-li">修订日志</div>
          <div class="btn-li">工作日志</div>
        </div>
      </div>
      <div class="my-table">
        <el-table :data="item.tableData" style="width: 100%">
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              <span>{{ scope.row.index }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="市县区"
            width="50"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.city }}</span>
            </template>
          </el-table-column>
          <el-table-column label="线路名称" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.lineName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="电压等级" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.grade }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="起点"
            :width="50"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.startingPoint }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="终点"
            :width="50"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.endPoint }}</span>
            </template>
          </el-table-column>
          <el-table-column label="位置描述" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.position }}</span>
            </template> </el-table-column
          ><el-table-column label="所属区域" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.region }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="搭挂杆塔数量（基）"
            :show-overflow-tooltip="true"
            width="150"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.towerNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="杆塔（公里）" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.towerkilometre }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="杆塔数量（条/根）"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.towerStripNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="皮长（公里）" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.skinLength }}</span>
            </template>
          </el-table-column>
          <el-table-column label="年租金（元）" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.rentYear }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              <span>{{ scope.row.remarks }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "recordsdDetail",
  components: {},
  data() {
    return {
      detailData: [
        {
          titleName: "第1期付款周期共享明细 ",
          okState: 1, // 1以确定；2 未确定
          tableData: [
            {
              index: 1,
              city: "山东",
              lineName: "线路名称",
              grade: "电压等级",
              startingPoint: "起点",
              endPoint: "终点",
              position: "位置描述",
              region: "所属区域",
              towerNum: "搭挂杆塔数量（基）",
              towerkilometre: "杆塔（公里）",
              towerStripNum: "杆塔数量（条/根）",
              skinLength: "皮长（公里）",
              rentYear: "年租金（元）",
              remarks: "备注",
            },
            {
              index: 2,
              city: "辽宁",
              lineName: "线路名称",
              grade: "电压等级",
              startingPoint: "起点",
              endPoint: "终点",
              position: "位置描述",
              region: "所属区域",
              towerNum: "搭挂杆塔数量（基）",
              towerkilometre: "杆塔（公里）",
              towerStripNum: "杆塔数量（条/根）",
              skinLength: "皮长（公里）",
              rentYear: "年租金（元）",
              remarks: "备注",
            },
          ],
        },
        {
          titleName: "第1期付款周期共享明细 ",
          okState: 2, // 1以确定；2 未确定
          tableData: [
            {
              index: 1,
              city: "山东",
              lineName: "线路名称",
              grade: "电压等级",
              startingPoint: "起点",
              endPoint: "终点",
              position: "位置描述",
              region: "所属区域",
              towerNum: "搭挂杆塔数量（基）",
              towerkilometre: "杆塔（公里）",
              towerStripNum: "杆塔数量（条/根）",
              skinLength: "皮长（公里）",
              rentYear: "年租金（元）",
              remarks: "备注",
            },
            {
              index: 2,
              city: "辽宁",
              lineName: "线路名称",
              grade: "电压等级",
              startingPoint: "起点",
              endPoint: "终点",
              position: "位置描述",
              region: "所属区域",
              towerNum: "搭挂杆塔数量（基）",
              towerkilometre: "杆塔（公里）",
              towerStripNum: "杆塔数量（条/根）",
              skinLength: "皮长（公里）",
              rentYear: "年租金（元）",
              remarks: "备注",
            },
          ],
        },
      ],
    };
  },
  methods: {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.flex-center {
  display: flex;
  align-items: center;
}
.bg-repeat {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@successColor: "#00998b";
.detail-box {
  width: 1215px;
  height: 915px;
  background: #ffffff;
  border-radius: 10px;
  padding: 12px 33px 12px 13px;
  .head {
    background: url("@/assets/bg_title.png");
    .bg-repeat;
    width: 408px;
    height: 26px;
    line-height: 26px;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    padding-left: 24px;
  }
  .title-name {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    margin: 27px 0 23px 0;
  }
  .detail-li {
    .state-btn {
      width: 48px;
      height: 22px;
      text-align: center;
      line-height: 22px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      margin-left: 18px;
    }
    .ok-btn {
      background: rgba(0, 153, 139, 0.11);
      border: 1px solid #00998b;
      color: #00998b;
    }
    .warning-btn {
      color: #ffb400;
      background: rgba(255, 144, 0, 0.11);
      border: 1px solid #ff9000;
    }
    .ok-detail {
      color: #00998b;
      background: rgba(0, 153, 139, 0.11);
    }
    .warning-detail {
      background: rgba(255, 144, 0, 0.11);
      color: #ffb400;
    }
    .detail-head {
      width: 100%;
      height: 40px;
      padding: 0 20px 0 22px;
      justify-content: space-between;
      .flex-center;
      .left-head {
        .flex-center;
      }
      .btn-box {
        .flex-center;
        .warning-btn-list {
          .flex-center;
        }
        .btn-li {
          background: rgba(48, 204, 193, 0.24);
          border-radius: 4px;
          border: 1px solid #00998b;
          margin-left: 20px;
          cursor: pointer;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #00998b;
          height: 33px;
          line-height: 33px;
          padding: 0 12px;
        }
      }
    }
    /deep/ .el-table .cell {
      padding-left: 2px !important;
      padding-right: 2px !important;
    }
    /deep/ .has-gutter {
      .el-table__cell {
        border-bottom: none !important;
      }
    }
    /deep/ .el-table tr {
      margin-bottom: 50px;
      background: linear-gradient(0deg, #eaeff4 0%, #f6faff 100%) !important;
    }
    .my-table {
      width: 1260px;
      margin-bottom: 30px;
      /deep/ .has-gutter {
        // 表头字体样式
        .cell {
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          opacity: 0.7;
        }
        .el-table .el-table__cell {
          padding: 4px 0 !important;
        }
      }

      /deep/ .el-table__row {
        // 表格内字体样式
        .cell {
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
        }
        .el-table__cell {
          padding: 2px 0 !important;
          border-bottom: none !important;
        }
      }
      /deep/ .el-table__header-wrapper {
        .el-table__cell {
          padding: 2px 0 !important;
        }
      }
      /deep/ .el-table__row {
        .el-table__cell {
          padding: 13px 0 !important;
        }
      }
      /deep/ .el-table__body-wrapper {
        margin-top: 10px;
      }
    }
  }
}
/deep/ .cell {
  text-align: center;
}
</style>
